<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <script src="/static/js/jquery.min.js"></script>
    <link rel="icon" href="/static/img/logo.png">
    <title>
        访客邀请
    </title>
</head>
<style>
    body {
        text-align: center
    }

    #divcss1 {
        border-radius: 30px;
    }

    #divcss2 {
        margin: 0 auto;
        border: 1px;
    }

    #divcss3 {
        margin: 0 auto;
        border: 1px;
    }

    #divcss8 {
        border-radius: 1px;
    }
</style>
<body>

<div style="background-image:url('/static/img/background.png');background-size:100% 100%; height: 100% ;width: 100%;padding-bottom: 25%;">
    <div>
    </div>
    <div class="div1" id="divcss8"
         style="background :rgba(188,216,255,0.16); height: 10%;width: 100%;font-size: 9pt;">
        <div>
            <br>
        </div>

        <font style="color: white"> 提示：为了保护门锁主人的隐私，请不要随意转发此链接和传播密码</font>

        <div>
            <br>
        </div>
    </div>
    <!-- style="background-color: #BCD8FF;opacity: 0.4;margin-top:10% ;margin-left: 7%;margin-right:  7% ;">-->
    <div class="div1" id="divcss1"
         style="background :rgba(188,216,255,0.4);margin-top:10% ;margin-left: 7%;margin-right:  7% ;">
        <div id="divcss2">

            <div id="divcss3" style="height: 80px;width: 80px;padding-top:50px; ">
                <img style=" width: 100%;border-radius:50%;height: auto;border-style:solid; border-color: rgba(255,255,255,1);" id="imgUrl" src="">
            </div>

            <h2 id="userName" style="color: white"></h2>
            <div style="padding: 0% 15% 0% 15%;text-align: center">
                <a id = "phone" href="tel:10086">
                    <img src="/static/img/phone.png">
                    <span style="font-weight: bold;text-align: center;color: white;font-size: 14pt" id="account" ></span>
                </a>

            </div>
            <!--<h3 id="account"style="color: white";background :rgba(255,255,255,0.95)></h3>-->
            <br>
            <div style="padding: 0% 15% 0% 15%;text-align: center">
                <img src="/static/img/dizhitubiao.png" >
                <span style="font-weight: bold;text-align: center;color: white;" id="location"></span>
            </div>
            <br>
            <div>
                <hr align="center" width="70%" style="color: white;opacity: 0.3"/>
            </div>
            <h3 style="color: white;font-size: 18pt;">开门密码</h3>
            <div style="padding: 0% 0% 0% 0%;text-align: center">
                <span id="lockPassword" style="font-weight: bold;text-align: center; font-size: 30px;color: white"></span>
            </div>
            <div style="padding: 10% 10% 10% 10%;text-align: center;color: white;">
                <div id="failTime" style="font-size:9pt"></div>
            </div>

            <br>

        </div>

    </div>
</div>
</body>
<script type="text/javascript">
    var id = getQueryString("id");//debug
    $.ajax({
        type: "get",
        url: "/api/password/share/id?id=" + id,
        dataType: "json",
        success: function (data) {
            if (data.success) {
                var password = data.dataObject.lockPassword;
                var split = password.split('');
                var str = split[0] + '\xa0\xa0\xa0' + split[1] + '\xa0\xa0\xa0' + split[2] + '\xa0\xa0\xa0' + split[3] + '\xa0\xa0\xa0' + split[4] + '\xa0\xa0\xa0' + split[5];
                $("#userName").text(data.dataObject.userName);
                $("#account").text(data.dataObject.account);
                $("#location").text(data.dataObject.location + data.dataObject.address);
                $("#lockPassword").text(str);
                var beginTime = timestampToTime(data.dataObject.beginTime);
                var endTime = timestampToTime(data.dataObject.endTime);
                $("#failTime").text("提示:访客邀请密码在" +beginTime + " 至 " + endTime+"内有效");
                var o1 = document.getElementById("phone");
                o1.href = "tel:"+data.dataObject.account;
                var o = document.getElementById("imgUrl");
                o.src = data.dataObject.imgUrl;

            } else {
                alert("密码获取失败");
            }
        }
    });

    /**
     * 获取url后面的参数
     * @param name  参数名
     * @returns
     */
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }

    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '年';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
        var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日 ';
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
        // var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());

        strDate = Y + M + D + h + m ;
        return strDate;

    }

</script>

</html>
